<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="author" content="Rjgtav">
    <title>Cờ hình Việt Nam</title>

    <!-- Reset styles -->
    <link href="css/reset.css" rel="stylesheet" type="text/css" />

    <!-- Load jQuery and jQWidgets frameworks -->
    <link href="scripts/jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css" />
    <link href="scripts/jqwidgets/styles/jqx.summer.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="scripts/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="scripts/gettheme.js"></script>
    <!--<script type="text/javascript" src="scripts/jqxcore.js"></script>-->

    <!-- Set custom styles -->
    <link href="css/main.css" rel="stylesheet" type="text/css" />

    <!-- Load createJS's required frameworks -->
    <script type="text/javascript" src="scripts/easeljs-0.5.0.min.js"></script>
    <script type="text/javascript" src="scripts/tweenjs-0.3.0.min.js"></script>

    <!-- Load jQWidgets' required widgets -->
    <script type="text/javascript" src="scripts/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="scripts/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="scripts/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="scripts/jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="scripts/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="scripts/jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="scripts/jqwidgets/jqxnavigationbar.js"></script>
    <script type="text/javascript" src="scripts/jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="scripts/jqwidgets/jqxdockpanel.js"></script>



    <!-- Load SFS2X JS API -->
    <script type="text/javascript" src="scripts/SFS2X_API_JS.js"></script>

    <!-- Load main script -->
    <script type="text/javascript" src="scripts/main.js"></script>
    <script type="text/javascript" src="scripts/Constants.js"></script>
    <script type="text/javascript" src="scripts/commands.js"></script>

    <!-- Initialize user interface -->
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "summer";

            //------------------
            // Init jqWidgets
            //------------------

            // Login View
            $("#connectBt").jqxButton({width:100, theme:theme});
            $("#disconnectBt").jqxButton({width:100, theme:theme, disabled:true});
            $("#loginBt").jqxButton({width:100, theme:theme, disabled:true});
            $("#logoutBt").jqxButton({width:100, theme:theme});
            $("#registerBt").jqxButton({width:100,theme:theme});
                        // Lobby View
            $("#publicChatAreaPn").jqxPanel({width:240, height:115, theme:theme, disabled:true, autoUpdate:true});
            $("#sendPublicMsgBt").jqxButton({width:100, theme:theme, disabled:true});
            $("#sideBar").jqxNavigationBar({width:250, height:535, sizeMode:"fitAvailableHeight", theme:theme});
//            $("#quickJoinBt").jqxButton({width:230, theme:theme});
//            $("#createGameBt").jqxButton({width:230, theme:theme});
//            $("#playGameBt").jqxButton({width:100, theme:theme, disabled:true});
//            $("#watchGameBt").jqxButton({width:100, theme:theme, disabled:true});
//            $("#deselectGameBt").jqxButton({width:24, theme:theme, disabled:true});

            $("#avatar").jqxListBox({source:[],width:230,height:120, scrollBarSize: 0,theme:"classic"});
            $("#bigroomList").jqxListBox({source:[], width:200,height:300, scrollBarSize: 0,theme:"classic"});
//            $("#joinbigroomBt").jqxButton({width:100,theme:theme,disabled:true});

            $("#roomList").jqxListBox({source:[], width:370, height:370, scrollBarSize: 10, theme:theme});
            $("#userList").jqxListBox({source:[], width:230, height:200, scrollBarSize: 10,theme:theme});
            $("#privChatAreaPn").jqxPanel({width:236, height:135, theme:theme, disabled:true, autoUpdate:true});
            $("#sendPrivMsgBt").jqxButton({width:76, theme:theme, disabled:true});
            $("#deselectUserBt").jqxButton({width:24, theme:theme, disabled:true});

            $("#colume").jqxDockPanel({width:900,height:730,theme:theme});

            $("#colume div").css('color','#fff');

            $("#colume > div > div").css({width:'auto',height:'auto'});

            $("#colume > div > div").css({ width: '300px' });
            $('#topdiv').attr('dock','top');
            $('#topdiv').height('200px');
            $('#topdiv').width('999px');
            $('#first').attr('dock', 'left');
            $('#first').width('250px')
            $('#second').attr('dock', 'left');
            $('#second').width('400px')
            $('#third').attr('dock','left');
            $('#colume').jqxDockPanel('render');

            // Game View
            $("#gameChatAreaPn").jqxPanel({width:235, height:530, theme:theme, disabled:true, autoUpdate:true});
            $("#sendGameMsgBt").jqxButton({width:76, theme:theme, disabled:true});
//            $("#leaveGameBt").jqxButton({width:100, theme:theme});
//
//            // Init game room creation window widgets
//            $("#createGameWin").jqxWindow({width:380, height:145, isModal:true, autoOpen:false, resizable:false, draggable:false, cancelButton:$("#cancelBt"), showAnimationDuration: 200, closeAnimationDuration: 100, theme:theme});
//            $("#doCreateGameBt").jqxButton({width:100, theme:theme});
            $("#cancelBt").jqxButton({width:100, theme:theme});
            $("#spectatorsIn").jqxNumberInput({width:80, height:20, decimalDigits:0, spinButtons:true, decimal:2, min:0, max:5, inputMode:"simple", theme:theme});

            // Game Popups
            $("#waitGameWin").jqxWindow({width:250, height:150, autoOpen:false, resizable:false, draggable:false, showCloseButton: false, showAnimationDuration: 200, closeAnimationDuration: 100, theme:theme});
            $("#waitSpecGameWin").jqxWindow({width:250, height:150, autoOpen:false, resizable:false, draggable:false, showCloseButton: false, showAnimationDuration: 200, closeAnimationDuration: 100, theme:theme});
            $("#endGameWin").jqxWindow({width:250, height:150, autoOpen:false, resizable:false, draggable:false, showCloseButton: false, showAnimationDuration: 200, closeAnimationDuration: 100, theme:theme});
            $("#endSpecGameWin").jqxWindow({width:250, height:150, autoOpen:false, resizable:false, draggable:false, showCloseButton: false, showAnimationDuration: 200, closeAnimationDuration: 100, theme:theme});
            $("#joinGameBt").jqxButton({width:100, theme:theme});
            $("#restartGameBt").jqxButton({width:100, theme:theme});

            //------------------
            // Event Listeners
            //------------------

            // Login View
            $("#connectBt").click(onConnectBtClick);
            $("#loginBt").click(onLoginBtClick);
            $(document).keydown(function(event){
                if(event.keyCode==13){
                    if(onEnterKey()==1)
                    $("#loginBt").click();
                    else if(onEnterKey()==2)
                    $("#sendPublicMsgBt").click();
                    else
                    $("#sendGameMsgBt").click();
                }
            })
            $("#registerBt").click(onRegisterBtClick);
            $("#disconnectBt").click(onDisconnectBtClick);
            $("#logoutBt").click(onLogoutBtClick);

            // Lobby View
            $("#sendPublicMsgBt").click(onSendPublicMessageBtClick);
            $("#userList").bind("select", onUserSelected);
            $("#roomList").bind("select",onRoomSelected);

            $("#quickJoinBt").click(onQuickJoinBtClick);
//            $("#createGameBt").click(onCreateGameBtClick);
//            $("#playGameBt").click(onPlayGameBtClick);
//            $("#watchGameBt").click(onWatchGameBtClick);
//            $("#deselectGameBt").click(onDeselectGameBtClick);
            $("#sendPrivMsgBt").click(onSendPrivateMessageBtClick);
            $("#deselectUserBt").click(onDeselectUserBtClick);

            $("#avatar").bind("select",oninfo);
//            $("#bigroomList").bind("select", onBigRoomSelected);
            $("#bigroomList").dblclick(onBigRoomSelected);
//            $("#joinbigroomBt").click(onJoinBigRoomClick);


            // Game View
            $("#sendGameMsgBt").click(onSendPublicMessageBtClick);
            $("#leaveGameBt").click(onLeaveGameBtClick);

//            $('#avatar').on('select', function (event) {
//                var args = event.args;
//                if (args) {
//                    var index = args.index;
//                    $('#avatar').jqxListBox('unselectItem', 0 );
//                }
//            });

            // Create new game Popup
//            $("#createGameWin").bind("closed", onCreateGameWinClose);
//            $("#doCreateGameBt").click(onDoCreateGameBtClick);

            // Game Popups
//            $("#joinGameBt").click(spectatorJoinGame);
//            $("#restartGameBt").click(restartGame);
        });
    </script>
</head>
<body onLoad="init()">

<div id="main" class="group">
    <!-- Login View -->
    <div id="loginparent" class="hidden viewStack">
    <div id="login">

        <h2>Đăng Nhập</h2>
        <div class="group vSep10">
            <input type="text" id="usernameIn" class="textInput" disabled="true" placeholder="Tên đăng nhập"/>
            <br></br>
            <input type="password" id="passwordIn" class="textInput" disabled="true" placeholder="Mật khẩu"/>
            <br></br>
            <input type="button" id="loginBt" value="Đăng nhập"/>
            <input type="button" id="registerBt" value="Đăng ký"/>
        </div>
        <div id="errorLb" class="error invisible vSep10">&nbsp;</div>
    </div>
        </br>
        </br>
        </br>
        <p>    1. Việc đăng ký thành viên là hoàn toàn tự nguyện và miễn phí
        </p></br><p>    2. Game Cờ Hình tuân theo luật chơi CỜ HÌNH được trình bày chi tiết tại <a href="http://www.cohinh.vn"target="_blank">cohinh.vn</a></h6>
        </p></br><p>    3. Mỗi thành viên mới được cộng 1000 điểm như là "nguồn vốn" ban đầu để thi đấu với các thành viên khác nhằm khẳng định thành tích cá nhân. Thành viên vào bàn chơi trước có thể cài đặt thời gian và điểm số cược cho mỗi ván đấu. Hai người chơi có thể trao đổi để thống nhất thông tin cài đặt thông qua mục "trò chuyện" ở bên phải bàn chơi. Thành viên nào thắng được cộng số điểm bằng số điểm cược còn thành viên thua bị trừ số điểm tương ứng.
        </p></br><p>    4. Trong thi đấu, khi người chơi sắp xếp được một dạng hình học hợp lệ thì tại các ô vuông có quân cờ xếp hình sẽ chuyển thành màu vàng. Điểm số sẽ tự động cộng cho thành viên và được đánh dấu bằng vị trí quân Biên. Phần mềm máy chủ phản ánh đúng luật chơi, ghi nhận kết quả các hiệp thi đấu và phân định Thắng - Thua chung cuộc.
        </p></br><p>    5. Có 3 danh hiệu thành viên là : thành viên ĐỒNG, thành viên BẠC, thành viên VÀNG.
            + Thành viên mới đăng ký được mặc định là thành viên Đồng, các thành viên khác không đạt chuẩn thành viên Bạc và thành viên Vàng cũng được xem là thành viên Đồng
            + Thành viên thi đấu >10 ván và < 50 ván, đồng thời số ván thắng > 1/2 tổng số ván chơi thì được công nhận là thành viên Bạc.
            + Thành viên thi đấu >50 ván, đồng thời số ván thắng >2/3 tổng số ván chơi thì được công nhận là thành viên Vàng. Nếu thành viên nào thi đấu >50 ván mà số ván thắng >1/3 nhưng <2/3 tổng số ván chơi thì thành viên đó đạt danh hiệu thành viên Bạc.
        </p>
    </div>
    <!-- Lobby View -->
    <div id="lobby" class="hidden viewStack">
        <div id='jqxWidget' style="width: 1000px;height: 700px; font-size:13px; font-family: verdana">
            <div id='colume'>
                <div id='topdiv' dock='left' style="background-image: url('images/background.png')" >
                    <div id="lefttop" class="lefttop">
                        <div id=avatar style="background-color: transparent;"></div>
                    </div>
                    <!--<div id="righttop">-->
                        <!--<img src="images/logo.png" alt="" style="float: right">-->
                    <!--</div>-->
                    <!--<div id='info'></div>-->
                </div>
                <div id='first' dock='left' >
                    <div style="width: 100%; height:108px; background-image: url('images/lobby_room.png');background-size: cover" >
                    </div>
                    <div  style="height: 100%;width:100%;background-image: url('images/box_room_list.png');background-repeat: no-repeat;background-size: contain">
                        <div style="padding-top: 10px;padding-left: 5px;width: 90%;height: 90%;">
                        <div id="bigroomList" style="padding: 15px;padding-left: 15px;"></div>
                        </div>
                    </div>
                </div>
                <div id='second' dock='left' STYLE="background-image: url('images/bg_danhsachbanchoi.png');background-size: 100%;background-repeat: no-repeat">
                    <!--<h1>Danh sách bàn chơi</h1>-->
                    <div style="padding-top: 80px;padding-left: 10px;width: 90%;height: 90%;">
                        <div id="roomList"></div>
                    </div>

                </div>
                <div id='third' dock='left' style="background-image: url('images/box_huongdancachchoi.png');background-size:contain;background-repeat: no-repeat">
                    <img src="images/dsnguoicho.png" alt=""style="padding-top: 20px;padding-left: 2px">
                    <div style="padding-top: 10px;padding-left: 10px;width: 90%;">
                        <div id="userList"></div>
                    </div>
                    <div id="chatbox" class="leftBox">
                        <div id="publicChatAreaPn"></div>
                        <div class="chatControls">
                            <input type="text" id="publicMsgIn" class="textInput" disabled="true" placeholder="Nhập văn bản " style="width: 130px;"/>
                            <input type="button" id="sendPublicMsgBt" value="Send"/>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- Game View -->
    <div id= "game" class="hidden viewStack" style="width: 1050px">
        <h1><b>Bàn chơi</b></h1>
        <div id="gameBar">
            <h2>&nbsp;<b>Trò chuyện</b></h2>
            <div class="gameBarControls">
                <div id="gameChatAreaPn"></div>
                <div class="vSeparateTop">
                    <input type="text" id="gameMsgIn" class="textInput smaller" disabled="true" placeholder="Nhập văn bản" style="width: 150px"/>
                    <input type="button" id="sendGameMsgBt" value="Send"/>
                </div>
            </div>
        </div>
        <div id="gamebox" class="leftBox">
            <canvas id="background" style="position: absolute; left: 50; top: 30; z-index: 0;"></canvas>
            <canvas id="time" style="position: absolute; left: 50; top: 30; z-index: 1;"></canvas>
            <canvas id="canvas1" style="position: absolute; left: 50; top: 30; z-index: 2;"></canvas>
            <script type="text/javascript" src="scripts/Piece.js"></script>
            <script type="text/javascript" src="scripts/chess.js"></script>
        </div>
    </div>
</div>
<div id="footer">
    <h6>Bản quyền © <a href="http://www.cohinh.vn"target="_blank">cohinh.vn</a></h6>
    <h6>  Liên hệ : cohinh@gmail.com Blog  <a href="http://cohinh.blogspot.com">cohinh.blogspot.com</a></h6>
</div>
</body>